<template>
	<view class="main animated fadeIn faster" style="overflow: hidden;">
		<view class="content position-fixed z-index-99" :style="{'paddingTop':$store.state.statusBarHeight+'px','top':'0'}">
			<view class="title">
				<view class="pl-2 mr-4" @click="goBack"><text class="iconfont icon-31fanhui1 font30 mr-5"></text></view>
				<text class="" :style="{marginRight: IsShow? '0' : '120rpx'}">{{title}}</text>
				<view v-if="IsShow" @click="next" class="mr-2" style="width: 120rpx;" :style="[{color: nextColor}]">下一步</view>
			</view>
		</view>
		<view class="d-flex" style="width: 2250rpx; transition: transform 0.3s ease;" :style="[{'paddingTop': titleTop},{transform: 'translateX('+DicX+'rpx)'}]">
			<view class="" style="width: 750rpx;">
				<view class="my-3 ml-2 font26" style="color: #121212;">实名认证前，需验证账号绑定的手机号，确保您的账号安全。</view>
				<view class="ml-2 font26" style="color: #121212;">{{RealText}}</view>
				<view class="ml-2 font32 mb-4" style="color: #040404;">{{Phone}}</view>
				<view class="d-flex d-flex-middle d-flex-between" style="border-bottom: 1px solid #a0d7cf; width: 700rpx; margin: 0 auto;">
					<input type="number" v-model="code" @input="oninput" maxlength="6" placeholder="请输入验证码"style="height: 85rpx;"/>
					<view @click="sendCode" :style="{color: RealBtnColor}">{{RealBtnText}}</view>
				</view>
				<view class="nextSty" @click="next" v-if="DeviceType === 'WeChat'">下一步</view>
			</view>
			<view style="width: 750rpx;">
				<view class="d-flex d-flex-around mt-4">
					<view class="d-flex-column d-flex-middle ml-5" style="width: 250rpx;">
						<view class="d-flex-btn rounded colorfff font34" style="background: #1bc1fd; width: 65rpx; height: 65rpx;">1</view>
						<view class="mt-1">填写身份资料</view>
					</view>
					<view class="d-flex-column d-flex-middle mr-5" style="width: 250rpx;">
						<view class="d-flex-btn rounded colorfff font34" style="background: #c2c9d7; width: 65rpx; height: 65rpx;">1</view>
						<view class="mt-1">核实身份</view>
					</view>
				</view>
				<view class="mt-4">
					<input type="text" v-model="RealName" class="InputSty" placeholder="填写真实姓名" style="height: 85rpx;"/>
					<input type="text" v-model="IDNumber" class="pl-3" placeholder="填写身份证号码" style="height: 85rpx;"/>
				</view>
				<view class="bg-f5 pt-2" style="overflow: hidden;">
					<checkbox  @click="AgreeId = !AgreeId" :checked="AgreeId" style="transform:scale(0.7);"></checkbox>
					<text>我已阅读并同意以下须知</text> 
					<view class="px-3 pt-3 font26" style="color: #a09ea1;">
						1、为验证您身份的真实性，向您提供更好的安全保障服务，小嗒组队将委托第三方服务提供者上海朴勋信息技术有限公司(021-50775098)、阿里云计算有限公司(4008013260)、腾讯云计算(北京)有限责任公司(4009100100)任一完成身份验证服务。
					</view>
					<view class="px-3 font26" style="color: #a09ea1;">
						2、勾选[同意]并输入姓名及身份证号码完成实名认证的，即视为您同意并授权第三方服务提供者获取、使用您所提交的个人身份信息用于实现身份验证功能;如您不同意授权，请退出本页面，除无法使用与实名认证相关的服务(如“积分提现”外，您可正常使用小嗒组队的其他服务。
					</view>
					<view class="px-3 font26 pb-4" style="color: #a09ea1;">
						3、您所填写的信息仅用于验证您的身份，小嗒组队依据国家相关法律法规保障您的信息安全和隐私权益。4、实名认证后非法定情形发生，不可更改与账号绑定的身份信息，请您正确填写。
					</view>
					<view class="d-flex ml-3 mb-2" style="color: #a09ea1;">查看<view style="color: #3abce4;">《小嗒组队实名认证须知》</view></view>
					<view class="d-flex ml-3" style="color: #a09ea1;">了解<view style="color: #3abce4;">《小嗒组队未成年人保护计划》</view></view>
					<view class="nextSty" @click="toPageThree" style="margin-top: 40rpx !important; width: 90% !important;">下一步</view>
					<view class="ml-3 mt-2 mb-5 pb-5" style="color: #a09ea1;">* 若实名认证为未成年人，将开启「青少年模式」</view>
				</view>
			</view>
			<view style="width: 750rpx;">
				<view class="mt-4 d-flex-column d-flex-middle">
					<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%AE%9E%E5%90%8D%E8%AE%A4%E8%AF%81.png" mode="widthFix" style="width: 200rpx;"></image>
					<view class="font32 mt-2 mb-2">实名认证成功</view>
					<view style="color: #c0c3c6;">实名认证成功后将无法更改</view>
				</view>
				<view class="mt-4 mb-3">
					<view  class="d-flex pl-3" style="border-top: 10px solid #ebeef5; height: 80rpx; line-height: 80rpx;">
						<view style="width: 200rpx; color: #a4a4a6;">姓名</view>
						<view>{{Name}}</view>
					</view>
					
					<view v-if="$store.state.user.idCard"  class="d-flex pl-3" style="border-bottom: 10px solid #ebeef5; height: 80rpx; line-height: 80rpx;">
						<view style="width: 200rpx; color: #a4a4a6;">身份证号</view>
						<view>{{IdCard}}</view>
					</view>
				</view>
				<!-- <view class="pt-2 pb-10" style="overflow: hidden; background: #ebeef5;">
					<label @click="ChangeAgreeFace" class="radio ml-2"><radio value="r1" :checked="AgreeFace" style="transform:scale(0.7);"/>我已阅读并同意以下须知</label>
					<view class="px-3 pt-3 font26" style="color: #a09ea1;">
						1、为验证您身份的真实性，向您提供更好的安全保障服务，小嗒组队将委托第三方服务提供者上海朴勋信息技术有限公司(021-50775098)、阿里云计算有限公司(4008013260)、腾讯云计算(北京)有限责任公司(4009100100)任一完成身份验证服务。
					</view>
					<view class="px-3 font26" style="color: #a09ea1;">
						2、勾选[同意]并输入姓名及身份证号码完成实名认证的，即视为您同意并授权第三方服务提供者获取、使用您所提交的个人身份信息用于实现身份验证功能;如您不同意授权，请退出本页面，除无法使用与实名认证相关的服务(如“积分提现”外，您可正常使用小嗒组队的其他服务。
					</view>
					<view class="px-3 pb-4 font26" style="color: #a09ea1;">
						3、您所填写的信息仅用于验证您的身份，小嗒组队依据国家相关法律法规保障您的信息安全和隐私权益。4、实名认证后非法定情形发生，不可更改与账号绑定的身份信息，请您正确填写。
					</view>
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import { userApi } from '../../http/userApi';
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				title: '安全验证',
				timer: null,
				nextColor: '#46C4FF',
				RealText: '通过以下手机号获取验证码信息',
				RealBtnColor: '#121212',
				RealBtnText: '发送验证码',
				totalTime: 60,
				code: '',
				RealName: '',
				IDNumber: null,
				DeviceType: null,
				IsShow: null,
				DicX: 0,
				flag:null,
				AgreeId: false,
				AgreeFace: false,
				isflag:false,
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
				this.DeviceType = 'App'
				this.IsShow = true
			// #endif
			
			// #ifdef H5
				this.DeviceType = 'H5'
				this.IsShow = true
			// #endif
			
			// #ifdef MP-WEIXIN
				this.DeviceType = 'WeChat'
				this.IsShow = false
			// #endif
			if(this.$store.state.user.realName!=''&&this.$store.state.user.realName!=null){
				this.title = '实名认证'
				this.DicX = -1500
				this.IsShow = false
			}
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			async sendCode(){
				let that = this
				if(that.totalTime == 60){
					try{
						uni.showLoading({
							title:'发送中'
						})
						let params = {
							phone: this.$store.state.user.phone,
							actionCode: 'real_name_valid_code'
						}
						let res = await userApi.SpecificSendCode(params)
						uni.hideLoading()
						that.startTimer()
					}catch(e){
						uni.hideLoading()
					}
				}
			},
			async realName(){
				let param = {
					idCard: this.IDNumber,
					name: this.RealName
				}
				try {
				    let res = await userApi.realName(param);
					this.title = '实名认证'
					this.DicX = -1500
					await this.setUserInfo();
					
				} catch (error) {
				   this.RealName=''
				   this.IDNumber=''
				   uni.showToast({
				   	title:'输入的信息有误，请重新输入',
				   	icon:'none',
				   })
				}
			},
			async CheckCode(){
				let params = {
					phone: this.$store.state.user.phone,
					code: this.code,
					actionCode: 'real_name_valid_code'
				}
				let res = await userApi.CheckCode(params)
				this.flag=res;
				if(this.flag){
					this.title = '填写实名认证信息'
					this.DicX = -750
					this.IsShow = false
				}else{
					uni.showToast({
						title:'验证码错误',
						icon:'none',
					})
				}
				
			},
			startTimer() {
				if (this.timer) return;
				this.totalTime--;
				this.RealBtnText = `发送验证码(${this.totalTime})`;
				this.RealBtnColor = '#a6a6a6'
				this.RealText = '已发送验证码信息到'
				this.timer = setInterval(() => {
				    if (this.totalTime <= 0) {
				        clearInterval(this.timer);
				        this.timer = null;
				        this.RealBtnText = '发送验证码';
						this.totalTime = 60
						this.RealBtnColor = '#121212'
						this.RealText = '通过以下手机号获取验证码信息'
				    } else {
				        this.totalTime--;
				        this.RealBtnText = `发送验证码(${this.totalTime})`;
						this.RealBtnColor = '#a6a6a6'
						this.RealText = '已发送验证码信息到'
				    }
				}, 1000);
			},
			next() {
				if(this.code == ''){
					uni.showToast({
						title:'请输入短信验证码',
						icon:'none',
					})
					return
				}
				   this.CheckCode()
				 // this.DicX = -750
				 // this.IsShow = false
			},
			async setUserInfo(){
				try{
					const usr = await userApi.getUserInfo()
					store.commit('setLogin',usr)
				}catch(e){
					console.log('login-info',e)
				}
			},
			toPageThree() {
				if(!this.AgreeId){
					uni.showToast({
						title:'请同意须知',
						icon:'none',
					})
				} else {
					if((this.RealName!== '' && this.RealName!== null && this.RealName!== undefined) && (this.IDNumber!== '' && this.IDNumber!== null && this.IDNumber!== undefined) ){
						const idCardReg = /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[0-9Xx]$/;
						if(idCardReg.test(this.IDNumber)){
							this.realName();
							
						}else{
							uni.showToast({
								title:'输入的身份证号格式不正确，请重新输入',
								icon:'none',
							})
							this.RealName=''
							this.IDNumber=''
						}
					}
				}
			},
			ChangeAgreeId() {
				this.AgreeId = !this.AgreeId
			},
			ChangeAgreeFace() {
				this.AgreeFace = !this.AgreeFace
			},
			oninput(e) {
				if(!e.detail.value.length) {
					this.nextColor = '#7cd8ff'
				} else {
					this.nextColor = '#46C4FF'
				}
			}
		},
		computed: {
			titleTop() {
				return this.$store.state.statusBarHeight + 40 + 'px'
			},
			Phone() {
				let phone = this.$store.state.user.phone
				if(phone!=''&&phone!=null){
					return phone.substr(0, 3) + "****" + phone.substr(7)
				}
			},
			IdCard(){
				if(this.$store.state.user.idCard) {
					let card = this.$store.state.user.idCard
					if (card && typeof card === 'string' && card.length > 0) {
						return card.substr(0,1) + "****************" +card.substr(17)
					}
				} else {
					if(this.IDNumber!==''&&this.IDNumber !== null && this.IDNumber !== undefined) {
					let card = this.IDNumber
						return card.substr(0,1) + "****************" +card.substr(17)
					}
				}
			},
			Name(){
				if(this.$store.state.user.realName) {
					let name = this.$store.state.user.realName;
					if (name && typeof name === 'string' && name.length > 0) {
						let firstPart = '*'.repeat(name.length - 1);
						let lastChar = name[name.length - 1];
						return firstPart + lastChar;
					}
				} else {
					if(this.RealName!==''&&this.RealName !== null &&this.RealName !== undefined){
						let name = this.RealName;
						if (name && typeof name === 'string' && name.length > 0) {
							let firstPart = '*'.repeat(name.length - 1);
							let lastChar = name[name.length - 1];
							return firstPart + lastChar;
						}
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	height: 100vh;
	.content .title {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
		padding-right: 47rpx;
		text {
			flex: 1;
			font-size: 32rpx;
			text-align: center;
			font-weight: normal;
		}
	}
	.z-index-99 {
		z-index: 99;
	}
	.nextSty {
		background: #cff0fb;
		border-radius: 50rpx;
		border: 1px solid #46C4FF;
		color: #46C4FF;
		text-align: center;
		height: 80rpx;
		width: 60%;
		margin: 100rpx auto 0;
		line-height: 80rpx;
	}
	.InputSty {
		padding-left: 30rpx;
		border-top: 10px solid #f5f5f5;
		border-bottom: 10px solid #f5f5f5;
	}
}
</style>
